<template>
  <div class="app-container" style="min-height: 88.5vh">
    <el-tabs v-model="search.houseType" type="border-card">
      <el-tab-pane v-for="item in tabs" :key="item.label" :label="item.label" :name="item.value"></el-tab-pane>
      <el-row class="d-flex jc-end">
        <el-button size="mini" @click="handleReset">清空查询条件</el-button>
        <el-button size="mini" type="primary" @click="handleSearch" :disabled="!search.cityCode">查询</el-button>
      </el-row>
      <el-form class="form-wrap" size="mini" :inline="true">
        <el-form-item label="城市">
          <el-select v-model="search.cityCode" filterable placeholder="请搜索" clearable>
            <el-option v-for="item in cityOptions" :key="item.code" :label="item.city" :value="item.code"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="小区名称">
          <el-autocomplete
            @input="onAreaInputChange"
            style="width: 240px"
            v-model="search.resblockName"
            :fetch-suggestions="remoteMethodSearchArea"
            placeholder="请输入关键词"
            @select="handleSelect"
            clearable
          ></el-autocomplete>
        </el-form-item>

        <!-- 区域筛选 -->
        <div>
          <el-form-item label="区域">
            <el-radio-group v-model="search.areaCode">
              <el-radio-button
                v-for="innerItem in districtList"
                :key="innerItem.areaCode"
                :label="innerItem.areaCode"
                >{{ innerItem.areaName }}</el-radio-button
              >
            </el-radio-group>
          </el-form-item>
        </div>

        <!-- 街道 -->
        <div v-show="streetList.length">
          <el-form-item>
            <el-radio-group v-model="search.bizcircleId">
              <el-radio-button v-for="innerItem in streetList" :key="innerItem.id" :label="innerItem.id">{{
                innerItem.bizcircleName
              }}</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </div>

        <!-- 其余筛选 -->
        <div v-for="item in configs" :key="item.key">
          <el-form-item :label="item.label">
            <template v-if="item.multiple">
              <el-checkbox-group v-model="search[item.key]">
                <el-checkbox-button v-for="innerItem in item.options" :key="innerItem.label" :label="innerItem.value">{{
                  innerItem.label
                }}</el-checkbox-button>
              </el-checkbox-group>
            </template>
            <template v-else>
              <el-radio-group v-model="search[item.key]">
                <el-radio-button v-for="innerItem in item.options" :key="innerItem.label" :label="innerItem.value">{{
                  innerItem.label
                }}</el-radio-button>
              </el-radio-group>
            </template>
          </el-form-item>
        </div>
      </el-form>
    </el-tabs>

    <div v-show="useable">
      <div v-loading="loading">
        <com-table-owner :tableList="tableList"></com-table-owner>
      </div>

      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="search.pageNum"
          :limit.sync="search.pageSize"
          @pagination="getList"
        />
      </el-row>
    </div>

    <div v-show="!useable" class="empty d-flex jc-center">
      <img src="@/assets/images/empty.png" style="width:175px; height:142px" />
      <div class="right-1 d-flex fd-column jc-between">
        <div class="tips1">当前城市即将开通</div>
        <div class="tips2">可提交申请，提前开放业主房源功能</div>
        <el-button class="btn1" type="primary" round @click="handleApply">申请开通</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import CITYS from "@/config/citys";
import {
  doRequestOpenCity,
  getBizcirclesCooperationHouse,
  getOwnerSubscribeCountByCityCode,
  getResblickByName,
  houseOwnerList,
} from "@/api/user";
import { rangeAddTimeX, rangeHouseType, rangeArea, rangeSalesPrice, rangeRentPrice } from "@/config/filterConfig";
import ComTableOwner from "@/views/extends/com/com-table-owner";
import pagination from "@/components/Pagination";
import { mapGetters } from "vuex";
import { customerHTML } from "@/handler/menuHandler";

export default {
  name: "PropertyOwner",
  components: {
    ComTableOwner,
    pagination,
  },
  props: {},
  data() {
    this._originBizcircles = [];
    return {
      useable: false, //当前城市是否开放
      total: 0,
      loading: true,
      tableList: [],
      tabs: [
        { label: "二手业主房源", value: "SALES" },
        { label: "出租业主房源", value: "RENT" },
      ],
      search: {
        cityCode: "", //"310000",
        bizcircleId: "", //"33de6a0561f646d088bd00748d8aaf16",
        hdResblockId: "", //"25c9dfffae7d44b5a2ee11c195a608eb",
        resblockName: "",
        areaCode: "", //"",
        houseType: "SALES", //"SALES",
        pageNum: 1, //1,
        pageSize: 10, //10,
        areaList: [], //[{min: 0, max: 50}, {min: 50, max: 70}],
        newExternalTime: "", //30,
        priceList: [], //[{min: 0, max: 100}, {min: 100, max: 150}],
        rentPriceList: [], //[{min: 0, max: 1000}, {min: 1000, max: 1500}],
        shiNumList: [], //[1, 2],
      },
      districtList: [], //区列表
    };
  },
  created() {
    this.cityOptions = [...CITYS];

    try {
      let loginCity = this.sessionUser.extProps.loginCity || "上海市";
      let cityData = CITYS.find((v) => v.city == loginCity);
      if (cityData) {
        this.search.cityCode = cityData.code;
      }
    } catch (error) {}
  },
  mounted() {
    this.handleSearch();
  },
  watch: {
    "search.cityCode": {
      handler(cityCode) {
        if (!cityCode) {
          this.districtList = [];
          this.search.areaCode = "";

          return;
        }
        this.reset();

        getOwnerSubscribeCountByCityCode({ cityCode }).then((content) => {
          this.useable = content != 0;

          getBizcirclesCooperationHouse({ cityCode }).then((content) => {
            this._originBizcircles = content;
            this.districtList = content.map((item) => {
              return {
                areaCode: item.areaCode,
                areaName: item.areaName,
              };
            });
          });
        });
      },
      immediate: true,
    },
    "search.areaCode": {
      handler(cityCode) {
        if (!cityCode) return;
        this.search.bizcircleId = "";
      },
      immediate: true,
    },

    "search.houseType": function(v) {
      this.handleSearch();
    },
  },
  computed: {
    ...mapGetters(["sessionUser"]),
    configs() {
      let config = {
        SALES: { key: "priceList", options: rangeSalesPrice, multiple: true, label: "价格" },
        RENT: { key: "rentPriceList", options: rangeRentPrice, multiple: true, label: "价格" },
      };
      return [
        { key: "newExternalTime", options: rangeAddTimeX, label: "时间" },
        { key: "shiNumList", options: rangeHouseType, multiple: true, label: "户型" },
        config[this.search.houseType],
        { key: "areaList", options: rangeArea, multiple: true, label: "面积" },
      ];
    },
    // 街道列表
    streetList() {
      let areaCode = this.search.areaCode;
      let area = this._originBizcircles.find((item) => {
        return item.areaCode === areaCode;
      });

      return !area
        ? []
        : area.hdBizcircleList.map(({ bizcircleName, id }) => {
            return { bizcircleName, id };
          });
    },
  },
  methods: {
    handleApply() {
      doRequestOpenCity({
        activityCode: "OWNER_HO_ACTIVITY", //活动code
        activityCode2: this.search.cityCode, //城市code
      }).then(() => {
        this.$message.success("申请成功！");
      });
    },
    remoteMethodSearchArea(query, cb) {
      const { cityCode } = this.search;
      if (query !== "") {
        getResblickByName({
          cityCode,
          resblockName: query,
          pageNo: 1,
          rows: 10,
          page: 1,
          pageSize: 10,
          subscribed: false,
        }).then(({ content }) => {
          let result = content.rows.map((item) => {
            return {
              value: item.resblockName || "",
              id: item.hdResblockId || "",
            };
          });
          cb(result);
        });
      } else {
        cb([]);
      }
    },
    // 选择小区
    handleSelect(e) {
      this.search.hdResblockId = e.id || "";
    },
    onAreaInputChange() {
      if (this.search.hdResblockId) {
        this.search.hdResblockId = "";
      }
    },
    reset() {
      this.search.bizcircleId = "";
      this.search.hdResblockId = "";
      this.search.resblockName = "";
      this.search.areaCode = "";
    },

    handleReset() {
      this.reset();

      this.search.shiNumList = [];
      this.search.priceList = [];
      this.search.rentPriceList = [];
      this.search.areaList = [];
      this.search.newExternalTime = "";
    },
    handleSearch() {
      this.getList({ page: 1 });
    },
    getList({ page }) {
      let { search } = this;
      let params = {};
      params.pageNum = page;
      for (const key in search) {
        let value = search[key];
        if (!value) continue;

        if (Array.isArray(value) && value.find((v) => /,/.test(v))) {
          params[key] = value.map((item) => {
            let i = item.indexOf(",");
            return { min: Number(item.slice(0, i)), max: Number(item.slice(i + 1)) || null };
          });
        } else if (key === "resblockName") {
          if (!params["hdResblockId"]) {
            params[key] = value;
          }
        } else {
          params[key] = value;
        }
      }
      this.loading = true;
      houseOwnerList(params).then((content) => {
        this.loading = false;
        this.total = content.total;
        this.search.pageNum = page;
        this.tableList = content.list;
      });
    },
  },
};
</script>
<style scoped>
.app-container {
  background: #f6f6f6;
}

.form-wrap {
  margin-top: 10px;
  padding: 0 20px;
}

.app-container >>> .el-radio-button {
  margin-bottom: 3px;
}

.empty {
  padding: 100px;
}
.right-1 {
  margin-left: 56px;
}
.tips1 {
  height: 23px;
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  line-height: 20px;
}

.tips2 {
  height: 18px;
  font-size: 18px;
  font-weight: 500;
  color: #666666;
  line-height: 20px;
}
.btn1 {
  width: 120px;
}
</style>
